<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="128px">
        <el-col :span="24">
          <el-form-item label="标题" prop="title" required>
            <el-input v-model="formData.title"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名" prop="name" required>
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门" prop="departName" required>
            <el-input v-model="formData.departName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="请假类型" prop="holidayType" required>
            <el-select v-model="formData.holidayType" placeholder="请假类型" clearable>
              <el-option v-for="dict in dict.type.holiday_type" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否销假" prop="backFromLeaveFlag" required>
            <el-radio-group v-model="formData.backFromLeaveFlag">
              <el-radio v-for="dict in dict.type.sys_yes_or_no" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="请假时间" prop="leaveTime" required>
            <el-date-picker type="datetimerange" v-model="formData.leaveTime"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="请假天数" prop="leaveDays" required>
            <el-input v-model="formData.leaveDays">
              <template slot="append">天</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="请假理由" prop="leaveForReason" required>
            <el-input v-model="formData.leaveForReason"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
export default {
  dicts: ["holiday_type","sys_yes_or_no"],
  components: {},
  props: [],
  data() {
    return {
      formData: {
        backFromLeaveFlag:'0',
      },
      rules: {},
    }
  },
  computed: {},
  watch: {},
  created() {
    this.formData.name = this.$store.state.user.name
    this.formData.departName = this.$store.state.user.userInfo.dept.deptName
    this.formData.deparId = this.$store.state.user.userInfo.dept.deptId
  },
  mounted() {

  },
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style>
</style>
